<template>
  <h1>饮食计划</h1>
  <div class="demo2-page">
    <div v-if="Array.isArray(plans) && plans.length > 0" class="plans-list">
      <div v-for="plan in plans" :key="plan.id" class="plan-item">
        <van-image
            :src="plan.imageUrl"
            width="100%"
            height="200"
            fit="cover"
            class="plan-image"
        />
        <div class="plan-info">
          <div class="description">
            <h3>{{ plan.description }}</h3>
            <p>天数: {{ plan.days }} 天</p>
          </div>
          <div class="participants">
            <p>参加人数: {{ plan.participants }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-plans">
      没有找到相关计划
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const plans = ref([]);

const fetchPlans = async () => {
  try {
    const response = await axios.get("http://127.0.0.1:9999/lanfan/web/Plan/getPlanList");
    if (response.data.code === 200) {
      plans.value = response.data.date || [];
    } else {
      console.error('Server returned an error:', response.data.message);
    }
  } catch (error) {
    console.error('Error fetching plans:', error);
  }
};

onMounted(() => {
  fetchPlans();
});
</script>

<style scoped>
.demo2-page {
  padding: 20px;
}
.plans-list {
  margin-top: 20px;
}
.plan-item {
  margin-bottom: 20px;
}
.plan-image {
  margin-bottom: 10px;
}
.plan-info {
  padding: 10px;
  background-color: #f8f8f8;
}
.description {
  margin-bottom: 10px;
}
.participants {
  text-align: right;
}
.no-plans {
  text-align: center;
  margin-top: 20px;
  color: #999;
}
</style>